<script setup>
import { onMounted, ref, toRaw } from "vue";
import { getCloudTree } from "@/api/myClooud";
import folder from "@/assets/svg/folder.svg?component";
const props = defineProps({
  formInline: {
    currentId: "",
    targetId: ""
  }
});

const newFormInline = ref(props.formInline);
const optionsData = ref([
  {
    id: 0,
    name: "我的云端",
    children: []
  }
]);
const getOptionsData = async () => {
  const response = await getCloudTree();
  optionsData.value[0].children = response.data;
};
onMounted(() => {
  getOptionsData();
});

const handleClickNode = v => {
  newFormInline.value.targetId = v.id;
};
</script>

<template>
  <div style="height: 300px; overflow-y: auto">
    <el-tree
      :data="optionsData"
      :props="{ label: 'name' }"
      node-key="id"
      :default-expanded-keys="[0]"
      @node-click="handleClickNode"
    >
      <template #default="{ node }">
        <div class="content">
          <folder class="icon" />
          <span class="title">{{ node.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<style scoped lang="scss">
.content {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 400;
  color: #212930;
  cursor: pointer;
  border-radius: 4px;

  .icon {
    width: 20px;
    height: 20px;
  }

  .title {
    margin-left: 5px;
  }
}
</style>
